<template>
  <div id="lesson-board-item" @click="learnLesson">
    <img
      src="https://img2.baidu.com/it/u=2598820676,2878707177&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400"
      alt=""
    />
    <div class="info">
      <div class="title">C++基础开发</div>
      <div class="teacher">@张一一</div>
      <div class="join-num">123人已加入</div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    learnLesson(){
      this.$router.push("/lessonface?sdfdsf=sdf")
    }
  }
};
</script>

<style scoped>
#lesson-board-item {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  cursor: pointer;
}
#lesson-board-item img {
  width: 35%;
  height: 60px;
  border-radius: 5px;
}

#lesson-board-item .info {
  width: 60%;
}

#lesson-board-item .info .title {
  font-size: 14px;
  font-weight: bolder;
  line-height: 20px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出div的内容 */
  text-overflow: ellipsis; /* 在超出部分显示省略号 */
}

#lesson-board-item .info .teacher,
.join-num {
  font-size: 11px;
  color: gray;
  line-height: 20px;
}
</style>